const canvas = document.createElement("canvas");
canvas.width = window.innerWidth - 10;
canvas.height = window.innerHeight - 10;

document.body.append(canvas);

// 绘制矩形
const fillRect = () => {
  const ctx = canvas.getContext("2d");
  // 绘制填充矩形
  ctx.fillRect(100, 100, 50, 50);
  // 绘制描边矩形
  ctx.strokeRect(100, 200, 50, 50);
  // 分开填充绘制矩形
  ctx.beginPath();
  ctx.rect(100, 300, 50, 50);
  ctx.fillStyle = "blue";
  ctx.fill();
  // 分开描边矩形
  ctx.beginPath();
  ctx.rect(100, 400, 50, 50);
  ctx.strokeStyle = "red";
  ctx.lineWidth = 10;
  ctx.stroke();
  // 绘制圆角矩形
  ctx.beginPath();
  ctx.roundRect(100, 500, 50, 50, 10);
  ctx.fill();
  ctx.roundRect(200, 500, 50, 50, [10, 20]);
  ctx.fill();
  ctx.roundRect(100, 600, 50, 50, [10, 20, 30]);
  ctx.fill();
  ctx.roundRect(200, 600, 50, 50, [10, 20, 30, 40]);
  ctx.fill();
  // 绘制直线
  ctx.beginPath();
  ctx.moveTo(200, 100);
  ctx.lineTo(300, 100);
  ctx.stroke();
  // 直线赋颜色
  ctx.beginPath();
  ctx.strokeStyle = "@00f";
  ctx.lineWidth = 30;
  ctx.moveTo(200, 200);
  ctx.lineTo(300, 200);
  ctx.stroke();
  // 绘制折线
  ctx.moveTo(200, 300);
  ctx.lineTo(300, 300);
  ctx.lineTo(200, 400);
  ctx.lineTo(300, 400);
  ctx.strokeStyle = "1ABC9C";
  ctx.stroke();
  // 线条api
  ctx.beginPath();
  ctx.lineCap = "butt";
  ctx.moveTo(400, 200);
  ctx.lineTo(500, 200);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineCap = "round";
  ctx.moveTo(400, 300);
  ctx.lineTo(500, 300);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineCap = "square";
  ctx.moveTo(400, 400);
  ctx.lineTo(500, 400);
  ctx.stroke();
};

if (!canvas.getContext) {
  console.log("您的浏览器版本过低，不支持canvas,请升级浏览器或者更换浏览器");
} else {
  fillRect();
}
